import React from "react"
import styles from '@/assets/css/about.module.css'
import { TMap } from '@map-component/react-tmap'

export default () => {
    let [roomList, SetRoomList] = useState([])


    useEffect(() => {
        getRoomData()
    }, [])

    // 获取房间信息
    const getRoomData = async () => {
        let result = await React.request.post('/room/AllRoom')

        if(result.code == 1) SetRoomList(result.data)
    }

    const SwiperView = () => {
        if(roomList.length <= 0)
        {
            return (<></>)
        }

        return (
            <div className={styles.top}>
                <React.UI.Swiper loop autoplay>
                    {roomList.map((item: any) => (
                        <React.UI.Swiper.Item key={item.id}>
                            <Link to={`/room/info?roomid=${item.id}`}>
                                <React.UI.Image src={item.thumb_text} height={213} fit="cover" />
                            </Link>
                        </React.UI.Swiper.Item>
                    ))}
                </React.UI.Swiper>
            </div>
        )
    }

    return (
        <>
            <div className={styles.header}>
                <React.UI.NavBar back="返回" onBack={() => React.navigate(-1)}>关于我们</React.UI.NavBar>
            </div>

            <SwiperView />

            <div className={styles.info}>
                <div className={styles.item}>
                    <div className={styles.title}>
                        <React.ICON.PhoneFill style={{marginRight: '5px'}}/>
                        联系电话: 
                        <span>13615815988</span></div>
                </div>

                <div className={styles.item}>
                    <div className={styles.title}>
                        <React.ICON.HeartFill style={{marginRight: '5px'}}/>
                        简介:
                    </div>
                    <div className={styles.desc}>
                        &nbsp;&nbsp;&nbsp;&nbsp;我们的酒店是一个充满温馨和舒适的地方，位于市中心，交通便利，周围环境优美，
                        部分房间能够看到江景，是您商务出行和休闲度假的理想选择。
                    </div>
                    <div className={styles.desc}>
                        &nbsp;&nbsp;&nbsp;&nbsp;我们的酒店还提供24小时接待服务、行李寄存等贴心服务，让您在入住期间感受到家
                        一般的温馨和舒适。
                    </div>
                    <div className={styles.desc}>
                        &nbsp;&nbsp;&nbsp;&nbsp;无论您是商务出行还是休闲度假，我们的酒店都能为您提供舒适便利的住宿体验。我们
                        期待着您的光临，让我们用真诚的服务和舒适的环境，为您打造美好的旅行回忆。
                    </div>
                </div>
            </div>

            {/* 地图 */}
            <div className={styles.notesin}>
                <TMap 
                    mapKey="2SZBZ-CKDLT-XWCXJ-LDHW7-KK5JQ-QKB4K"
                    center={{ lat: 39.984104, lng: 116.307503 }}
                    version='1.exp'
                />
            </div>
        </>
    )
}